<template>
  <el-col :span="Number(colspan)" :offset="Number(offset)">
    <el-form-item
      :prop="name"
      :label="label"
      :title="label != ''?label:placeholder"
    >
      <el-input
        :disabled="eleDisabled"
        :name="name"
        v-model="inputvalue"
        :type="type"
        :placeholder="placeholder"
        :maxlength="Number(maxlength)"
        :id="'input' + name"
        :size="size"
        @change="onChange(inputvalue)"
        @blur="onBlur"
        @focus="onFocus"
      >
        <i
          class="el-icon-search"
          slot="suffix"
          v-show="isIcon"
          @click="onClick"
        ></i>
      </el-input>
    </el-form-item>
  </el-col>
</template>

<script type="es6">
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    isIcon:{
      type:Boolean,
      default:false
    },
    colspan: {
      type: String,
      default: "24"
    },
    labelWidth: {
      type: String,
      default: "100"
    },
    label: {
      type: String,
      default: ""
    },
    offset:{
      type: String|Number,
      default: 0
    },
    size:{
      type: String,
      default: 'medium'
    },
    placeholder: {
      type: String,
      default: ""
    },
    eleDisabled: {
      type: Boolean,
      default: false
    },
    p: {
      type: String,
      default: ""
    },
    type: String,
    maxlength: "",
    property: {
      type: Object,
      default: function() {
        return {
          value: "",
          p: ""
        };
      }
    },
    name: {
      type: String,
      default: ""
    },
    datas: {
      type: Object,
      default: null
    },
    isChange: {
      type: Boolean,
      default: false
    },
    isClick: {
      type: Boolean,
      default: false
    },
    isBlur: {
      type: Boolean,
      default: false
    },
    isFocus: {
      type: Boolean,
      default: false
    },
    isRed: {
      type: Boolean,
      default: false
    },
    isCodeType: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(newValue, oldValue) {
      this.inputvalue = newValue;
    }
  },
  created() {},
  data() {
    return {
      inputvalue: this.value
    };
  },
  computed: {
    codeTypes() {
      return this.$store.getters.codeTypes;
    }
  },
  mounted() {
    document.getElementById("input" + this.name).style.color = this.isRed
      ? "red"
      : "";
  },
  methods: {
    /**
     * 点击事件
     */
    onClick() {
      if (!this.isClick) return;
      this.$emit("isClick", true);
      let obj = {
        path: this.$route.path + "/doQuery/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    },
    /**
     * 选择事件
     */
    onChange(data) {
      // console.log(data)
      this.$emit("input-message", data, this.name);
      // if (!this.isChange) return;
      // let obj = {
      //     path: this.$route.path + '/doCheck/' + this.name,
      //     params: {
      //         path: this.$route.path,
      //         ...this.datas
      //     }
      // };
      // if(this.isCodeType){
      //     obj.params.codeTypes = this.codeTypes;
      // }
      // this.$store.dispatch('SET_COMMONPOST', obj);
    },
    /**
     * 失去焦点
     */
    onBlur() {
      if (!this.isBlur) return;
      let obj = {
        path: this.$route.path + "/blur/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    },
    /**
     * 获取焦点
     */
    onFocus() {
      if (!this.isFocus) return;
      let obj = {
        path: this.$route.path + "/focus/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    }
  }
};
</script>

<style lang="css" scoped>
.el-icon-search {
  color: #000;
  cursor: pointer;
}
</style>
